import React, { Component } from 'react';
import { bindMethods } from '../untils';
import { UserEdit } from '../components';

export default class UserEditContainer extends Component {
  static handleDate() {
    const date = new Date();
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const Dates = `${year}-${month}-${day}`;
    const Time = `${hours}:${minutes}`;
    return {
      Dates,
      Time,
    };
  }

  constructor() {
    super();
    this.state = {
      lists: [],
      showFilter: false,
      filter: 0,
      isChecked: 0,
      userInput: '',
      id: 0,
      isModify: false,
    };
    bindMethods(this, [
      'handleFileterShow',
      'handleFliterCheck',
      'handleUserInput',
      'handleNoteAdd',
      'handleNoteModify',
    ]);
  }

  componentWillMount() {
    if (!localStorage.getItem('noteData')) {
      localStorage.setItem('noteData', JSON.stringify([]));
    }
    if (location.search) { // 修改状态下
      const id = location.search.replace(/\?\w+=(\d)/, '$1');
      this.setState({
        lists: JSON.parse(localStorage.getItem('noteData')),
        isModify: true,
      }, () => {
        const targetItem = this.state.lists.filter(item => item.id == id)[0];
        this.setState({
          userInput: targetItem.content,
          filter: targetItem.filter,
        });
      });
    } else {
      this.setState({ // 新增状态下
        lists: JSON.parse(localStorage.getItem('noteData')),
        id: +localStorage.getItem('id'),
      });
    }
  }
  // 切换分类栏
  handleFileterShow() {
    this.setState({
      showFilter: !this.state.showFilter,
    });
  }
  // 分类选择
  handleFliterCheck(index) {
    this.setState({
      showFilter: !this.state.showFilter,
      isChecked: index,
      filter: index,
    });
  }
  // 获取用户输入
  handleUserInput(value) {
    this.setState({
      userInput: value,
    });
  }
  // 记录添加
  handleNoteAdd() {
    const { userInput, filter } = this.state;
    if (userInput === '') {
      alert('您还未填写任何内容');
      return;
    }
    const params = {
      id: this.state.id++,
      content: userInput,
      filter,
      Dates: UserEditContainer.handleDate().Dates,
      Time: UserEditContainer.handleDate().Time,
    };
    this.setState({
      lists: [...this.state.lists, params],
    }, () => {
      localStorage.setItem('noteData', JSON.stringify(this.state.lists));
      localStorage.setItem('id', this.state.id);
    });
  }
  // 记录修改
  handleNoteModify() {
    const id = location.search.replace(/\?\w+=(\d)/, '$1');
    const lists = this.state.lists.map((item) => {
      if (item.id == id) {
        Object.assign(item, {
          content: this.state.userInput,
          Dates: UserEditContainer.handleDate().Dates,
          Time: UserEditContainer.handleDate().Time,
        });
      }
      return item;
    });

    this.setState({
      lists,
    }, () => {
      localStorage.setItem('noteData', JSON.stringify(this.state.lists));
    });
  }
  render() {
    return (
      <UserEdit
        {...this}
        {...this.state}
        noteOperation={() => {
          if (this.state.isModify) {
            this.handleNoteModify();
          } else {
            this.handleNoteAdd();
          }
          history.go(-1);
        }}
      />
    );
  }
}
